<template>
  <div class="job-message">
    <div class="project-info-content">
      <header>
        <span>排序：<b class="active-blue m-r-10">发布日期</b> 热度</span>
        <span class="input-box">
          <el-input v-model="searchForm.value" placeholder="请输入关键词进行搜索" class="input-with-select" style="width: 420px; height: 35px">
            <template #prepend>
              <el-select v-model="searchForm.key" placeholder="Select" style="width: 120px">
                <el-option label="全文" value="1" />
              </el-select>
            </template>
            <template #append>
              <el-button icon="Search" />
            </template> </el-input></span>
      </header>
      <main>
        <ul>
          <li v-for="(item, index) in noticeList" :key="index">
            <span class="title">{{ item.title }}</span>
            <span class="time">{{ item.time }}</span>
          </li>
        </ul>
        <el-pagination class="m-r" :current-page="queryParams.currentPage" :page-size="queryParams.pageSize" :page-sizes="[5, 10, 20, 50]"
          layout="total, sizes, prev, pager, next, jumper" :total="queryParams.total" />
      </main>
    </div>
  </div>
</template>

<script >
export default {
  data() {
    return {
      searchForm: {
        key: "1",
        value: "",
      },
      queryParams: {
        total: 18,
        currentPage: 1,
        pageSize: 10
      },
      noticeList: [
        {
          title:
            '推动区域协同实现科创资源效用最大化',
          time: '2024-04-09'
        },
        {
          title: '江苏科技打出创新组合拳',
          time: '2024-04-18'
        },
        {
          title: '绩效考评暨建设研讨会召开',
          content: '',
          time: '2024.04',
          key: '1'
        },
        {
          title: '华中科技大学来我校参观调研',
          content: '',
          time: '2024.04',
          key: '2'
        },
        {
          title: ' 我校第32期大型仪器开放测试基金评审工作完成',
          content: '',
          time: '2024.04',
          key: '3'
        },
        {
          title: '北京海关一行到北京大学调研并开展联合党建活动',
          content: '',
          time: '2024.03',
          key: '4'
        },
        {
          title: '实验室与设备管理部组织召开多模态跨尺度生物医学成像设施动物设施建设协调会',
          content: '',
          time: '2024.02',
          key: '5'
        },
        {
          title: '实验室与设备管理部组织召开“北京大学AI for Science (AI4S) 平台” 研讨会',
          content: '',
          time: '2024.01',
          key: '6'
        },
        {
          title: '可4D观察活鼠胚胎发育的新型智能显微镜问世',
          content: '',
          time: '2023.05',
          key: '7'
        },
        {
          title: '安全监测仪器检定系统问世',
          content: '',
          time: '2023.04',
          key: '7'
        },
      ]
    }
  }
}

</script>

<style lang="less" scoped>
  .job-message {
    background: url('~@/assets/img/互动交流.png') no-repeat center;
    background-size: 100% 100%;
    padding: 30px 0;
  }
  .project-info-content {
    width: 63%;
    margin: 0 auto;
    background: #ffffff;
    border-radius: 4px;
    padding: 20px;
    header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      border-bottom: 1px solid #dadcde;
      padding-bottom: 10px;
      color: #333;
      .active-blue {
        color: #358aff;
      }
      :deep(.input-box) {
        font-size: 16px !important;
        border: 1px solid #dbddde;
        .el-input {
          width: 100% !important;
        }
        border-radius: 4px;
        .el-input__wrapper,
        .el-input__inner {
          border: none !important;
          box-shadow: none !important;
          color: #333 !important;
        }
        .el-input-group__prepend,
        .el-input__wrapper,
        .el-input-group__append {
          background: transparent;
          border: none !important;
          box-shadow: none !important;
          color: #333 !important;
        }
      }
    }
    main {
      ul {
        li {
          position: relative;
          padding: 20px 20px 15px 30px;
          border-bottom: 1px dashed #c5c6c8;
          display: flex;
          justify-content: space-between;
          .title::before {
            position: absolute;
            left: 5px;
            top: 27px;
            content: '';
            width: 6px;
            height: 6px;
            border-radius: 50%;
            background: #d2dce4;
            z-index: 1;
          }
          .time {
            color: #999;
          }
        }
      }
    }
  }
</style>
